［情境任務］

解師傅：太好了，菜單該有的功能都有了，這麼一來就萬無一失了！

小當家：恩…萬事俱備，只欠東風

解師傅：欸？…還需要什麼東風？

小當家：我一直很想說，你們不覺得這菜單長得很醜嗎．．．

解師傅：難怪我覺得看久了眼睛有點痛…(掩面)

我們需要排版跟樣式的協助，來吸引更多的客人，我們來幫忙美化一下吧！！

如果要使用 CSS 的預處理器，需要先安裝 sass

安裝 SASS

// npm 
npm i sass

//yarn
yarn add sass

如此一來，就可以在全局使用 SCSS 或 SASS 了

樣式的使用方法

分享四種調整樣式的方法，可依自己的喜好去使用

• 在組件中使用 style
• 全域 CSS
• CSS module 模組化
• styled-components

1. 在組件中使用 Style

const btn = {
  color: 'red'
};

const Btn = () => {
  return (
    <div>
      <button style={btn}>我是按鈕</button>
      <button style={{color: 'black'}}>我是按鈕</button>
    </div>
  );
}

export default Btn;

不需引入外部的 CSS，直接在組件中寫 style

在 JSX 裡 style 是一個物件，所以需要用物件的方式傳給 style

2. 全域 CSS

btn.scss

.btn {
  color: red;
}

Btn.js

import "./btn.scss";

const Btn = () => {
  return (
    <div>
      <button className="btn">我是按鈕</button>
    </div>
  );
}

export default Btn;

就跟一般寫 CSS 一樣，以 scss 為例，
在專案新增 scss 檔案並載入，加入需要調整的樣式

檔案放哪裡沒有特別規定，有的人將 scss 檔統一放在 style 的資料夾，有的人會跟 .js 檔放在同一個資料夾，依照團隊或個人的習慣去放就可以了

3. CSS module 模組化

btn.module.scss

.btn {
  color: red;
}

Btn.js

import Style from "./btn.scss";

const Btn = () => {
  return (
    <div>
      <button className={Style.btn}>我是按鈕</button>
    </div>
  );
}

export default Btn;

跟上一個用法其實一樣，不同的是附檔名要加上 .module，
module.scss 引入後需要給個命名，以範例為例命名為 Style，

模組化可以避免不同檔案相同 className 的衝突，
.module.scss 檔的樣式只會存在在有引入的頁面

4. styled-components

首先安裝套件

npm i styled-components

Btn.js

import styled from "styled-components";

const Button = styled.button`
  width: 100px
`

const ButtonText = styled.span`
  color: red
`

const Btn = () => {
  return (
    <Button>
      <ButtonText>我是按鈕</ButtonText>
    </Button>
  );
}

export default Btn;

styled-components 可以將 CSS 直接放到組件處理，命名後當成標籤來使用

［任務解題］

我們用了 css module 美化了菜單，看起來順眼多了呢！

codesandbox 程式碼範例

結語

以上介紹了四種方法，可依自己的喜好或情境使用，一起來試試看吧！

本文將同步更新至我的部落格
Lala 的前端大補帖